<template>
  <div style="display: flex; flex-direction: column; height: 100%">
    <SearchList :params="tableParams" :exclude-keys="['status']" @search="search">
      <SearchItem title="关键字搜索">
        <a-input v-model:value="tableParams.keywords" placeholder="供应商名称/产品名称/原料市场" />
      </SearchItem>
      <SearchItem title="供应商名称">
        <a-input v-model:value="tableParams.supplierName" allow-clear placeholder="供应商名称" />
      </SearchItem>
      <SearchItem title="规格">
        <a-input v-model:value="tableParams.specification" placeholder="请输入规格" />
      </SearchItem>
      <SearchItem title="榜单号">
        <a-input v-model:value="tableParams.weighingNumber" placeholder="请输入榜单号" />
      </SearchItem>
      <template #left>
        <StatusTab v-model:active="activeTab" :tabs="statusList" @change="changeTab" />
      </template>
      <template #actions>
        <GenerateDate @refresh="flushData" />
        <a-button size="small" type="primary">新建</a-button>
      </template>
    </SearchList>
    <BoliTabel ref="tableRef" :columns="columns" api="/admin/instorage/list" :params="tableParams">
      <template #status="{ text }">
        <MatchStatus :status="text" />
      </template>
      <template #action>
        <Action>
          <div class="action-item">编辑</div>
        </Action>
      </template>
    </BoliTabel>
  </div>
</template>

<script setup>
import Action from '@/components/BoliTable/Action.vue'
import BoliTabel from '@/components/BoliTable/index.vue'
import MatchStatus from '@/components/MatchStatus/index.vue'
import { SearchList } from '@/components/SearchList'
import StatusTab from '@/components/StatusTab/index.vue'
import { columns, statusData } from './data'
import GenerateDate from './GenerateData.vue'

defineOptions({
  name: 'DispatchInstorage',
})

const tableParams = reactive({
  keywords: null,
  supplierName: '', // 供应商名称
  specification: '', // 规格
  weighingNumber: '', // 榜单号
  status: null,
})

const activeTab = ref(0)

const tableRef = ref(null) //

const statusList = reactive([...statusData])

// 切换tab
function changeTab(item) {
  tableParams.status = item.query
  tableRef.value?.refresh()
}

function search(keywords) {
  if (keywords) {
    tableParams.keywords = keywords
  }
  getStatusCount()
  tableRef.value?.refresh()
}

function getStatusCount() {
  httpRequest('/admin/instorage/count', tableParams).then(res => {
    statusList[0].value = res.all
    statusList[1].value = res.padding
    statusList[2].value = res.matching
    statusList[3].value = res.matched
    statusList[4].value = res.completed
  })
}

function flushData() {
  tableRef.value?.refresh()
  getStatusCount()
}

getStatusCount()
</script>

<style lang="less" scoped>
.status-list {
  display: flex;
  align-items: center;
  height: 100%;

  & > div {
    margin-right: 20px;
    font-size: 14px;
    color: #111;

    & span {
      margin-right: 5px;
    }
  }
}
</style>
